<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>clock</title>
</head>
<body>
	<canvas id="canvas" width="500" height="500"></canvas>

	<script>
		var canvas = document.getElementById('canvas'),
			context = canvas.getContext('2d'),
			MARGIN = 50,
			FONT_HEIGHT = 15;
			HAND_TURNCATION = canvas.width / 25,
			HOUR_HAND_TURNCATION = canvas.width / 10,
			NUMERAL_SPACING = 20,
			RADIUS = canvas.width / 2 - MARGIN,
			HAND_RADIUS = RADIUS + NUMERAL_SPACING;

		function drawCircle() {
			context.beginPath();
			context.arc(canvas.width / 2, canvas.height / 2, RADIUS, 0, Math.PI * 2, true);
			context.stroke();
		}

		function drawCenter() {
			context.beginPath();
			context.arc(canvas.width / 2, canvas.height / 2, 5, 0, Math.PI * 2, true);
			context.fill();
		}

		function drawHand(loc, isHour) {
			var angle = (Math.PI * 2) * (loc / 60) - Math.PI / 2,
				handRadius = isHour ? RADIUS - HAND_TURNCATION - HOUR_HAND_TURNCATION : RADIUS - HAND_TURNCATION;

			context.moveTo(canvas.width / 2, canvas.height / 2);
			context.lineTo(canvas.width / 2 + Math.cos(angle) * handRadius, 
							canvas.height / 2 + Math.sin(angle) * handRadius);
			context.stroke();
		}

		function drawNumberals() {
			var angle = 0,
				numberalWidth = 0;

			for(var i = 1; i <= 12; i++) {
				var numberal = i;
				angle = Math.PI / 6 * (numberal - 3);
				numberalWidth = context.measureText(numberal).width;
				context.fillText(numberal, canvas.width / 2 + Math.cos(angle) * (HAND_RADIUS) - numberalWidth / 2,
								canvas.height / 2 + Math.sin(angle) * (HAND_RADIUS) + FONT_HEIGHT / 2);
				context.stroke();
			}
		}

		function drawHands() {
			var date = new Date,
				hour = date.getHours();

			hour = hour > 12 ? hour - 12 : hour;

			drawHand(hour * 5 + (date.getMinutes() / 60) * 5, true, 0.5);
			drawHand(date.getMinutes(), false, 0.5);
			drawHand(date.getSeconds(), false, 0.2);
			drawNumberals();
		}
 

		function drawClock() {
			context.clearRect(0, 0, canvas.width, canvas.height);
			drawCircle();
			drawCenter();
			drawHands();
		}

		context.font = FONT_HEIGHT + 'px Arail';
		setInterval(drawClock, 1000)
	</script>
</body>
</html>